<!--
 * @Author: 孙大大
 * @Date: 2022-04-09 18:25:02
 * @LastEditTime: 2022-04-14 02:18:17
 * @FilePath: \黑马面面111\src\views\questions\choice\search.vue
-->
<template>
  <div class="dashboard-container">
    <!-- <button @click="updataTableData1">更新</button> -->
    <div class="app-container">
      <el-card class="my-card">
        <el-alert type="info"> 数据一共{{ tableData.counts }}条 </el-alert>

        <!-- 列表 -->
        <el-table
          key="table11"
          :data="tableData.items"
          style="width: 100%"
          @row-click="cellClick"
        >
          <el-table-column prop="catalog" label="目录" width="80">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="90">
            <template slot-scope="{ row }">
              <span v-if="row.questionType == 1">单选</span>
              <span v-if="row.questionType == 2">多选</span>
              <span v-if="row.questionType == 3">简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="80">
            <template slot-scope="{ row }">
              <span v-html="row.question"> </span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="90">
            <template slot-scope="{ row }">
              <span> {{ row.addDate | formatDate }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="90">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty == 1">简单</span>
              <span v-if="row.difficulty == 2">一般</span>
              <span v-if="row.difficulty == 3">困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="80">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="80">
            <template slot-scope="{ row }">
              <el-tag type="warning" v-if="row.chkState == 0">待审核</el-tag>
              <el-tag type="success" v-if="row.chkState == 1">通过</el-tag>
              <el-tag type="danger" v-if="row.chkState == 2">拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="90">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="80">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="90">
            <template slot-scope="{ row }">
              <span v-if="row.publishState == 0">未发布</span>
              <span v-if="row.publishState == 1">已发布</span>
            </template>
          </el-table-column>
          <el-table-column prop="todo" label="操作" width="250">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                style="height: 72px; line-height: 72px; margin-right: 5px"
                @click="view"
                >预览</el-button
              >
              <el-button
                :disabled="row.publishState == 0 || row.chkState == 2"
                type="text"
                style="height: 72px; line-height: 72px; margin-right: 5px"
                @click="check"
                >审核</el-button
              >
              <el-button
                :disabled="row.publishState == 1 || row.publishState == 1"
                @click="GoNew"
                type="text"
                style="height: 72px; line-height: 72px; margin-right: 5px"
                >修改</el-button
              >
              <el-button
                v-if="row.publishState == 1"
                type="text"
                style="height: 72px; line-height: 72px; margin-right: 5px"
                @click="open1"
                >下架</el-button
              >
              <el-button
                v-else
                type="text"
                style="height: 72px; line-height: 72px; margin-right: 5px"
                @click="open"
                >上架</el-button
              >
              <el-button
                :disabled="row.publishState == 1"
                type="text"
                style="height: 72px; line-height: 72px; margin-right: 5px"
                @click="deleteQuestion"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="float: right; margin: 20px">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="5"
            layout="total, prev, pager, next, jumper"
            :total="tableData.counts"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 查看试题详情弹窗 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="635px">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="6">【题型】：{{ questionType }}</el-col>
        <el-col :span="6">【编号】：{{ number }}</el-col>
        <el-col :span="6">【难度】：{{ difficulty }}</el-col>
        <el-col :span="6">【标签】：{{ catalog }}</el-col>
      </el-row>
      <br />
      <br />
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">【学科】：{{ subject }}</el-col>
        <el-col :span="6">【目录】：{{ catalogID }}</el-col>
        <el-col :span="6">【方向】：{{ direction }}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <br />
      <br />
      <hr />
      <!-- 第三行 -->
      <el-row>
        <el-col :span="24" v-html="question"></el-col>
      </el-row>
      <hr />
      <!-- 第四行 -->
      <el-row>
        <el-col :span="24" v-html="answer"></el-col>
      </el-row>
      <hr />
      <!-- 第五行 -->
      <el-row>
        <el-col :span="24"
          >【答案解析】：
          <el-button type="danger" @click="isVideoShow"
            >视频答案预览</el-button
          ></el-col
        >
        <template v-if="videoShow">
          <video :src="videoURL" controls style="width: 300px"></video>
        </template>
      </el-row>
      <hr />
      <!-- 第六行 -->
      <el-row>
        <el-col :span="24" v-html="remarks"></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisible1"
      width="30%"
      @close="shenhe"
      ref="shenhe"
    >
      <el-row :gutter="10">
        <el-col :span="24">
          <el-radio v-model="radio" label="1" @change="radioChange"
            >通过</el-radio
          >
          <el-radio v-model="radio" label="2" @change="radioChange"
            >拒绝</el-radio
          >
        </el-col>
      </el-row>
      <br />
      <br />
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item prop="textarea">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入审核意见"
            v-model="ruleForm.textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="dialogVisible1 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  checkState,
  check,
  xiaJia,
  deleteQuestion,
  GetList,
} from "@/api/questions";
export default {
  name: "articles",
  props: {
    tableData1: {
      required: true,
    },
    // questionList: {
    //   require: true,
    // },
    index: {
      required: true,
    },
    strData: {
      required: true,
    },
    params: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      row: null,
      shenhestr: "",
      show: true,
      formInline: {
        user: "",
        region: "",
      },
      random: Math.random(),
      tableData: {
        items: [],
      },
      videoShow: false,
      currentPage: 1,
      page: 1,
      pagesize: 5,
      counts: "",
      dialogVisible: false,
      YL: "----------------------------------------------",
      questionType: "",
      number: "",
      difficulty: "",
      catalog: "",
      subject: "",
      catalogID: "",
      direction: "",
      question: "",
      answer: "",
      remarks: "",
      id: "",
      publishState: "",
      SH: "------------------------------------------------",
      dialogVisible1: false,
      radio: "1",
      // changeRadio: "",
      ruleForm: {
        textarea: "",
      },
      rules: {
        textarea: [
          { required: true, message: "必须输入审核意见", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCheckState();
  },
  watch: {
    params: {
      handler(v) {
        console.log("params = ", v);
        this.updataTableData(v);
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      let res2 = await checkState({
        page: this.page,
        pagesize: this.pagesize,
      });
      this.tableData = res2;
      if (this.index == 1) {
        checkState({
          page: val,
          pagesize: this.pagesize,
          chkState: 0,
        }).then((res) => {
          this.tableData = res;
        });
      } else if (this.index == 2) {
        checkState({
          page: val,
          pagesize: this.pagesize,
          chkState: 1,
        }).then((res) => {
          this.tableData = res;
        });
      } else if (this.index == 3) {
        checkState({
          page: val,
          pagesize: this.pagesize,
          chkState: 2,
        }).then((res) => {
          this.tableData = res;
        });
      }
    },
    async getCheckState() {
      let res = await checkState({
        page: this.page,
        pagesize: this.pagesize,
      });
      // console.log(676767676, res);
      this.counts = res.counts;
      this.tableData = res;
    },
    async changeTableData() {
      this.tableData = this.tableData1;
    },
    async view() {
      this.dialogVisible = true;
    },
    cellClick(row) {
      console.log(row);
      this.row = row;
      if (row.questionType == 1) {
        this.questionType = "单选题";
      } else if (row.questionType == 2) {
        this.questionType = "多选题";
      } else if (row.questionType == 3) {
        this.questionType = "简答题";
      }
      this.number = row.number;

      if (row.difficulty == 1) {
        this.difficulty = "简单";
      } else if (row.difficulty == 2) {
        this.difficulty = "一般";
      } else if (row.difficulty == 3) {
        this.difficulty = "困难";
      }

      this.catalog = row.catalog;

      this.subject = row.subject;

      this.catalogID = row.catalogID;

      this.direction = row.direction;

      this.question = "【题干】：" + row.question;

      this.answer = "【参考答案】：" + row.answer;

      this.remarks = "【题目备注】：" + row.remarks;

      this.id = row.id;
      this.publishState = row.publishState;
      console.log(891263487126391827);
    },
    check() {
      this.dialogVisible1 = true;
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await check(this.id, {
            id: this.id,
            chkState: parseInt(this.radio),
            chkRemarks: this.ruleForm.textarea,
          });
          this.dialogVisible1 = false;
          this.$message.success("审核成功");
          this.getCheckState();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // this.dialogVisible1 = false;
    },
    // 切换单选按钮
    radioChange(val) {
      // console.log(this.id);
      this.radio = val;
    },
    // 上架弹窗
    open() {
      this.$confirm("您确认上架这道题目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await xiaJia(this.id, 1, {
            id: this.id,
            publishState: 1,
          });
          this.getCheckState();
          this.$message({
            type: "success",
            message: "上架成功!",
          });
          this.checkIndex(this.page);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消上架",
          });
        });
    },
    // 下架弹窗
    open1() {
      this.$confirm("您确认下架这道题目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await xiaJia(this.id, 0, {
            id: this.id,
            publishState: 0,
          });
          this.getCheckState();
          this.$message({
            type: "success",
            message: "下架成功!",
          });
          this.checkIndex(this.page);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消下架",
          });
        });
    },
    // 删除弹窗
    deleteQuestion() {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await deleteQuestion(this.id, {
          id: this.id,
        });
        this.checkIndex(this.page);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    checkIndex(val) {
      if (this.index == 1) {
        checkState({
          page: val,
          pagesize: this.pagesize,
          chkState: 0,
        }).then((res) => {
          this.tableData = res;
        });
      } else if (this.index == 2) {
        checkState({
          page: val,
          pagesize: this.pagesize,
          chkState: 1,
        }).then((res) => {
          this.tableData = res;
        });
      } else if (this.index == 3) {
        checkState({
          page: val,
          pagesize: this.pagesize,
          chkState: 2,
        }).then((res) => {
          this.tableData = res;
        });
      }
    },
    // 修改tableData
    async updataTableData(param) {
      // this.tableData = this.$store.state.question.questionList1;
      // console.log(this.tableData);
      // // alert("修改成功");

      console.log("触发后的str", this.strData);
      try {
        // let newData = await GetList(this.strData);
        let newData = await GetList(param);
        console.log("这是newData的值:", newData);
        // this.$set(this.tableData, "items", newData.items);
        this.counts = newData.counts;
        this.tableData = newData;
        // this.tableData = Object.assign({}, { items: [], counts: 0 });
        // this.tableData.items = [];
        // this.$set(this, "tableData", newData);
        // this.tableData.items = [];
        // this.tempData = newData.items;
        // this.$set(this, "tempData", newData.items);
        // console.log("???? = ", this.tempData);
        console.log("触发后请求到的数据", newData);
        console.log("更改后的tableData", this.tableData);
        this.$forceUpdate();
        this.random = Math.random();
      } catch (error) {
        console.log(error);
      }
    },
    // updataTableData1() {
    //   this.updataTableData();
    //   console.log(111);
    // },
    GoNew() {
      this.$router.push({
        path: "/tiku/shiti",
        query: {
          qusetionList: this.row,
        },
      });
    },
    // 视频预览开关
    isVideoShow() {
      this.videoShow = !this.videoShow;
    },
    shenhe() {
      // 清空el-dialog中的内容
      this.ruleForm.textarea = "";
      this.radio = "1";
    },
  },
};
</script>

<style lang="scss" scoped>
// [data-v-f70f99cc]
// [data-v-f70f99cc]
// my-card
.my-card[data-v-f70f99cc] .el-card__header {
  padding: 100px;
  border-bottom: 5px solid #ebeef5 !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
<style>
.app-container {
  padding: 0;
}
.my-card .el-card__header {
  padding-bottom: 0px;
  border-bottom: 0px solid #ebeef5 !important;
}
.my-card .el-card__body {
  padding-top: 0px;
}
.my-card .el-form-item {
  margin: 10px 0;
}
.my-card .el-alert {
  margin: 8px 0 16px;
}
.my-card .el-table__header-wrapper {
  border-bottom: 2px solid #e8e8e8;
  background-color: #fafafa;
}
.my-card th {
  background-color: #fafafa !important;
}
.my-card .my-btn {
  width: 95px;
  height: 32px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.my-card .my-shou {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
  margin-left: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.my-card .my-cha {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
}
.my-card .el-input__inner {
  height: 32px;
}
.my-card .my-item-two {
  margin-left: 40px;
}

.span {
  color: #0fa2fa;
}

.el-dialog__header {
  background-color: #409eff;
}

.el-dialog__title {
  color: #fff;
}

.el-dialog__close {
  color: #fff !important;
}
</style>
